<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>消息提醒效果</title>
    <style>
        #toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            z-index: 1000;
        }
        .toast {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #333;
            color: #fff;
            border-radius: 5px;
            opacity: 0.9;
            transition: opacity 0.5s, transform 0.5s;
            transform: translateY(100%);
        }
        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>

<div id="toast-container"></div>

<script>
// JavaScript代码将放在这里
</script>

</body>
</html>